import { Suspense, useDeferredValue, useState } from 'react';
import SearchResults from './SearchResults';

export default function Deffer() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  console.log('query   ,  deferredQuery', query, deferredQuery);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}
